<template>
  <el-container>
    <el-main class="leftMain">
      <tags-tree :show-tabs="true" :show-device-index="true" :query-data="queryData"></tags-tree>
    </el-main>
    <el-main class="rightMain">
      <bs-main>
        <set-tag-condition slot="header" @add="doAdd" @edit="doEdit" @delete="doDelete"></set-tag-condition>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="true"
          :list-cols="colData"
          :action-opts="actionOpts"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          @init-table="initTable"
          @sort="handleSort"
        >
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="true" :allChecked="allSize" @all="handleChangeAllSize" @pagination="doList"></pagination>
      </bs-main>
    </el-main>
    <set-tag-dialog></set-tag-dialog>
  </el-container>
</template>

<script>
import SetTagCondition from './components/SetTagCondition'
import SetTagDialog from './components/SetTagDialog'
import TagsTree from './TagsTree'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import DeviceMonitorApi from '@/api/device'
import CommonApi from '@/api/common'
import ScreenApi from '@/api/screen'

export default {
  data() {
     const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols'],
    }
    return {
      initHeadmuneFlag: false,
      queryData: {},
      editorForm: {},
      tableData: [],
      actionOpts: {
        show: false
      },
      colData: [
        { label: '标签名称',  prop:'name', minwidth: 150 , headerContextMenus},
        { label: '标签类型',  prop:'categoryName', minwidth: 150, headerContextMenus },
        { label: '创建用户',  prop:'createdUsername' , headerContextMenus },
        { label: '创建时间', prop:'createdAt', minwidth: 150 ,headerContextMenus },
        { label: '更新时间', prop:'lastModifiedAt', minwidth: 150 ,headerContextMenus}
      ],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      initColsProps: ['name', 'categoryName','createdUsername','createdAt','lastModifiedAt'],
      tableName:'tagsSetTableList',
      sortKey: {
        name: 1,
        categoryName: 2,
        createdUsername: 3,
        createdAt: 4,
        lastModifiedAt: 5,
      },
      allSize: false
    }
  },
  created() {
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
  },
  components: {
      SetTagCondition,
      SetTagDialog,
      TagsTree,
      List,
      Pagination
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  methods: {
    // 排序
    handleSort(sortInfo) {
      console.log('sortInfo----', sortInfo)
      this.queryData.orderParam = sortInfo.type
      this.queryData.orderType = this.sortKey[sortInfo.prop]
      this.doList()
    },
    initTable(config) {
      this.initHeadmuneFlag = true //更改值  触发表头数据重绘
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      this.allSize = false
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      // queryData.type = 2
      const res = await ScreenApi.tagsList(queryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },
    getActiveItem() {
        let items = this.$refs.list.getActiveItem()
        return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    doAdd(){
      if(!this.pageData.categoryId){
        this.$alert('提示', '请先选择标签类别')
        return
      }
      if(this.pageData.categoryId === '0') {
        this.$alert('提示', '不允许添加标签')
        return
      }
      this.$eventBus.$emit('showSetTagDialog', { categoryId: String(this.pageData.categoryId) })
    },
    doEdit() {
      const data = this.getActiveItem()
      if (!data) {
        this.$alert('提示', '请先选择标签')
        return
      }
      if(data.length > 1) {
        this.$alert('提示', '只能选择一条记录')
        return
      }
      this.$eventBus.$emit('showSetTagDialog', data)
    },
    async doDelete() {
      let ids = []
      let msg = '是否删除已选择的标签？'
      if(!this.allSize) {
        const data = this.getActiveItem()
        if (!data) {
          this.$alert('提示', '请先选择标签')
          return
        }
        if(data.length > 1) {
          data.forEach(item => {
            ids.push(item.id)
          })
        } else {
          ids.push(data.id)
        }
      } else {
        msg = '将删除所有标签,是否继续？'
      }
      const confirm = await this.$confirm('提示', msg)
      if(confirm) {
        const queryData = {
          ...this.queryData, 
          allSize: this.allSize,
          total: this.pageData.total
        }
        await ScreenApi.delTag(this.allSize ? { ids: ids, ...queryData } : {ids: ids})
        this.doList()
        this.$success('del')
      }
    },
    // 选择所有页
    handleChangeAllSize(val) {
      this.allSize = val
      this.$refs.list.clearSelection();
    }
  }
}
</script>